<template>
	<view class="box">
		<view class="status_bar"></view>
		<view class="status_bar_fixed"></view>
		<view v-if="top>0" :style="'height: '+top+'px;'"></view>
		<view v-if="top>0" class="BarTitle" :style="'padding-top:'+top+'px'">{{row.webname}}</view>
		<view v-if="!load" class="body zt_qj bj_zhu">
		    <view class="content">
		        <!-- 轮播图 -->
		        <view class="lbtbox">
					<swiper class="swiper" autoplay indicator-dots indicator-color="#999" indicator-active-color="#f60">
						<swiper-item v-for="(item,index) in row.banner" :key="index">
							<view class="carousel-item" @click="get_play_url(item.id)">
								<image :src="item.pic" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
		        </view>
		        <!-- 金刚区 -->
		        <view class="navbox bj_fff">
		            <view class="li" @click="get_link('cases')">
		                <view class="img"><image src="../static/img/indexnav/nav1.png" mode="aspectFill"></image></view>
		                <view class="name">追剧</view>
		            </view>
		            <view class="li" @click="get_link('custom?type=news')">
		                <view class="img"><image src="../static/img/indexnav/nav2.png" mode="aspectFill"></image></view>
		                <view class="name">最新</view>
		            </view>
		            <view class="li" @click="get_link('custom')">
		                <view class="img"><image src="../static/img/indexnav/nav3.png" mode="aspectFill"></image></view>
		                <view class="name">排行</view>
		            </view>
		            <view class="li" @click="get_link('custom?type=free')">
		                <view class="img"><image src="../static/img/indexnav/nav4.png" mode="aspectFill"></image></view>
		                <view class="name">免费</view>
		            </view>
		        </view>
		        <!-- 推荐模块 -->
		        <view class="indexlistbox"> 
		            <view class="qjtitle">
		                <view class="icon"><image src="../static/img/indexnav/cnxh.png" mode="aspectFill"></image></view>
		                <view class="h2">热门推荐</view>
		                <!-- <view class="sub">每日推荐热门短剧</view> -->
		            </view>
		            <view class="list">
		                <view v-for="(item,index) in row.reco" :key="index" class="li" @click="get_play_url(item.id)">
		                    <view class="kzdk">
		                        <view class="imgbox">
		                            <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		                        </view>
		                        <view class="name">{{item.name}}</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <!-- 排行榜 -->
		        <view class="indexlistbox">
		            <view class="qjtitle">
		                <view class="icon"><image src="../static/img/indexnav/nav3.png" mode="aspectFill"></image></view>
		                <view class="h2">排行榜</view>
		                <!-- <view class="sub">本周热播TOP3</view> -->
		            </view>
		            <view class="list">
		                <view v-for="(item,index) in row.hot" :key="index" class="li" @click="get_play_url(item.id)">
		                    <view class="kzdk">
		                        <view class="imgbox">
		                            <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		                        </view>
		                        <view class="name">{{item.name}}</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <!-- 最新更新 -->
		        <view class="indexlistbox">
		            <view class="qjtitle">
		                <view class="icon"><image src="../static/img/indexnav/nav1.png" mode="aspectFill"></image></view>
		                <view class="h2">最新更新</view>
		                <!-- <view class="sub">每日更新追剧不断</view> -->
		            </view>
		            <view class="list">
		                <view v-for="(item,index) in row.news" :key="index" class="li" @click="get_play_url(item.id)">
		                    <view class="kzdk">
		                        <view class="imgbox">
		                            <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		                        </view>
		                        <view class="name">{{item.name}}</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
		<loading :load="true" v-else></loading>
		<!-- 新版本更新 -->
		<view class="update-bg" v-if="update.show" @touchmove.stop.prevent="get_return()">
			<view class="update">
				<view class="box">
					<view class="title">发现新版本 V{{update.version}}</view>
					<view class="text"><text v-for="(text,index) in update.text">{{text}}</text></view>
					<view class="btn-noforce">
						<view class="btn1" @click.stop="get_update_close">以后再说</view>
						<view class="btn2" @click.stop="get_update_btn">立即更新</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp(),that = null;
	export default {
		data() {
			return {
				top: 0,
				load: true,
				row: {},
				update: {
					show: false,
					ver: '',
					text: [],
					downurl: '',
					wgturl: ''
				}
			}
		},
		onLoad(e) {
		    that = this;
			if(e.lnvite_code) uni.setStorageSync('lnvite_code',e.lnvite_code);
			// #ifdef H5
			if(that.isWechat()){
				if(!uni.getStorageSync('user_token')){
					that.checkWeChatCode()
				}else{
					that.get_data();
				}
			}else{
				that.get_data();
			}
			// #endif
			// #ifndef H5
			that.get_data();
			// #endif
			// #ifdef MP-WEIXIN
			that.top = uni.getMenuButtonBoundingClientRect().top;
			// #endif
			// #ifdef APP-PLUS
			that.top = uni.getSystemInfoSync().statusBarHeight;
			// #endif
		},
		onShow() {
			that.get_app_update();
		},
		onPullDownRefresh() {
			that.get_data();
		},
		methods: {
			get_return(){
				return false;
			},
			get_play_url(id){
				let url = 'play?id='+id;
				// #ifdef APP-PLUS
					url = 'aplay?id='+id;
				// #endif
				that.get_link(url);
			},
			get_link(url){
				console.log(url);
				if(url == 'cases'){
					uni.switchTab({
						url: '../pages/'+url
					})
					return;
				}
				uni.navigateTo({
					url: '../pages/'+url
				});
			},
			get_data(){
				that.http.get_applet_code(function(wxcode){
					that.http.get_curl('index',{appletcode:wxcode},function(res){
						uni.stopPullDownRefresh(); //停止下拉样式
						that.load = false;
						if(res.code == 1){
							that.row = res.data;
							if(res.data.user_token){
								if(res.data.user_token == 'del'){
									uni.removeStorageSync('user_token');
								}else{
									uni.setStorageSync('user_token',res.data.user_token);
								}
							}
							uni.setNavigationBarTitle({
							    title: that.row.webname
							});
						}
					});
				});
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
					.replace(/\+/g, '%20')) || null
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = that.getUrlCode('code')
				if (code) {
					that.getOpenidAndUserinfo(code)
				}else{
					that.getAppid();
				}
			},
			//请求微信接口，用来获取code
			getAppid() {
				if(app.globalData.appid){
					that.getWeChatCode();
				}else{
					that.http.get_curl('init/index',{},function(res){
						if(res.code == 1){
							if(res.data.url){
								window.location.href = res.data.url;
							}else{
								app.globalData.appid = res.data.appid;
								if(app.globalData.appid){
									that.getWeChatCode();
								}else{
									that.get_data();
								}
							}
						}
					});
				}
			},
			getWeChatCode() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				if(window.location.href.indexOf('?code=') > -1){
					let uarr = window.location.href.split('?code=');
					local = uarr[0];
				}
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				window.location.href =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
					app.globalData.appid + 
					"&redirect_uri=" +
					local +
					"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
			},
			//把code传递给后台接口，静默登录
			getOpenidAndUserinfo(code) {
				that.http.get_curl('login/mplog',{wxcode:code},function(res){
					if(res.code == 1){
						uni.setStorageSync('user_token',res.data.token);
						that.get_data();
						if(window != undefined && window.location.href.indexOf('?code=') > -1){
							setTimeout(()=>{
								let uarr = window.location.href.split('?code=');
								window.location.href = uarr[0];
							},500);
						}
					}
				});
			},
			get_app_update(){
				// #ifdef APP-PLUS
				that.http.get_curl('init/update',{},function(res){
					if(res.code == 1){
						//判断新版本
						if(res.data.update.isupdate){
							if(res.data.update.wgturl != ''){
								plus.runtime.getProperty(plus.runtime.appid, function() {  
									uni.downloadFile({  
										url: res.data.update.wgturl,
										success: (downloadResult) => {  
											if (downloadResult.statusCode === 200) {  
												plus.runtime.install(downloadResult.tempFilePath, {
													force: false
												}, function() {  
													console.log('install success...');
													plus.runtime.restart();
												}, function(e) {
													console.log('install fail...');
												});  
											}  
										}  
									});
								});
							}else{
								res.data.update.show = true;
								that.update = res.data.update;
							}
						}
					}
				});
				// #endif
			},
			get_update_btn(){
				// #ifdef APP-PLUS
				plus.runtime.openURL(that.update.downurl);
				// #endif
			},
			get_update_close(){
				that.update.show = false;
			}
		}
	}
</script>

<style lang="scss">
	swiper-item,swiper{width: 100%;height: 100%;}
	.BarTitle{width: 100%;line-height: 40px;text-align: center;font-size: 16px;font-weight: 500;background: #fff;position: fixed;top:0;left:0;z-index: 99;}
	/* 轮播图 */
	.box{padding-bottom: 20rpx;}
	.lbtbox{padding: 0 16px;margin-top: 16px;height: 260rpx;}
	.lbtbox .carousel-item{width: 100%;height: 100%;border-radius: 10rpx;overflow: hidden;position: relative;}  
	.lbtbox .carousel-item image{width: 100%;height: 100%;object-fit: cover;}  
	/* 金刚区 */
	.navbox{width: calc(100% - 32px);margin: 0 auto;margin-top: 16px;box-shadow: 0px 2px 16px 0px rgba(0,0,0,.04);border-radius: 5px;display: flex;justify-content: space-between;padding: 10px 0;}
	.navbox .li{width: 25%;height: 75px;display: inline-block;cursor: pointer;}
	.navbox .li .img{width: 50px;height: 50px;margin: 0 auto;}
	.navbox .li .img image{width: 100%;height: 100%;object-fit: cover;}
	.navbox .li .name{font-size: 14px;font-weight: 600;text-align: center;}
	/* 全局qjtitle */
	.qjtitle{width: 100%;height: 30px;position: relative;}
	.qjtitle .icon{width: 20px;height: 20px;display: inline-block;vertical-align: middle;margin-right: 10px;}
	.qjtitle .icon image{width: 100%;height: 100%;object-fit: cover;}
	.qjtitle .h2{font-size: 16px;font-weight: 600;display: inline-block;vertical-align: middle;line-height: 30px;}
	.qjtitle .sub{font-size: 14px;color: #999;line-height: 30px;position: absolute;top: 0;right: 0;}
	 /* 首页模块 */
	.indexlistbox{width: calc(100% - 32px);margin: 0 auto;margin-top: 16px;}
	.indexlistbox .list{width: 100%;display: flex;justify-content: revert;flex-wrap:wrap;}
	.indexlistbox .list .li{width: calc(33.333% - 11px);background: #fff;position: relative;border-radius: 8px;overflow: hidden;margin-right: 16px;margin-top: 16px;cursor: pointer;box-shadow: 0px 2px 16px 0px rgba(0,0,0,.04);}
	.indexlistbox .list .li:nth-child(3n){margin-right: 0;}
	.indexlistbox .list .li .kzdk{width: 100%;display: block;}
	.indexlistbox .list .li .kzdk .imgbox{position: relative;width: 100%;padding-bottom: 120%;background: #f2f2f2;}
	.indexlistbox .list .li .kzdk .imgbox .img{width: 100%;height: 100%;margin: 0 auto;position: absolute;overflow: hidden;}
	.indexlistbox .list .li .kzdk .imgbox .img image{width: 100%;height: 100%;object-fit: cover;}
	.indexlistbox .list .li .kzdk .name{padding: 0 5px;font-size: 14px;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 30px;text-align: center;}
	.update-bg{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		z-index: 9999990;
		background: rgba(0,0,0,.4);
		.update{
			position: relative;width: 80%;height: 730rpx;left:10%;top:50%;transform: translateY(-50%);z-index:9999992;background: url(../static/img/update.png) no-repeat;background-size: 100% 100%;
			.box{
				padding: 0 32rpx;
				.title{padding-top: 340rpx;color:#FF8700;font-size:44rpx;text-align: center;}
				.text{
					padding: 10rpx 0px;font-size:28rpx;color:#666666;width: 85%;height: 180rpx;overflow-y: auto;text-align: left;margin: 0 auto;
					text{width: 100%;display: block;line-height: 50rpx;}
				}
				.btn-force{position: absolute;width: 70%;left: 15%;bottom:30rpx;height: 72rpx;line-height: 72rpx;background: linear-gradient(90deg, #FD7955 0%, #FD9B7A 100%);border-radius: 8rpx;text-align: center;color:#ffffff;}
				.btn-noforce{
					position: absolute;width: 70%;left: 15%;bottom:60rpx;height: 72rpx;text-align: center;font-size:0;
					view{display: inline-block;width: 39%;margin: 5%;height: 72rpx;line-height: 72rpx;}
					.btn1{border-radius: 4px;border: 1px solid #EAEAEA;color: #666666;font-size: 28rpx;}
					.btn2{border-radius: 4px;background: linear-gradient(90deg, #FD7955 0%, #FD9B7A 100%);color: #ffffff;font-size: 28rpx;}
				}
			}
		}
	}
</style>
